<template>
  <div>
    <header>header</header>
    <main>
      <aside>
        <div class="box1">
          <Echarts :options="options" :data="data1" type="bar" />
        </div>

        <div class="box2">
          <Echarts :options="options2" :data="data2" type="line" />
        </div>
        <div class="box3">box3</div>
      </aside>
      <section>
        <div id="map"></div>
      </section>
      <article>article</article>
    </main>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import aMap from "@/utils/map";
import Echarts from "./components/Echarts.vue";

const options = {
  title: {
    text: "ECharts 入门示例",
  },
  tooltip: {},
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  },
  yAxis: {},
};
const data1 = ref([]);
onMounted(() => {
  data1.value = [5, 20, 36, 10, 10, 20];
});

const options2 = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
};
const data2 = ref([]);
onMounted(() => {
  data2.value = [150, 230, 224, 218, 135, 147, 260];
});

onMounted(async () => {
  await aMap.init(
    "458fb0e35714be9cb3cadb5218ff5920",
    "7506b6d1d097a3c6a990cb7d1768d3c2",
    14,
    [120.26408, 30.305451]
  );

  aMap.addMarker(120.26408, 30.305451);
  aMap.addMarker(120.29408, 30.305451);

  aMap.addToolBar();
});
</script>

<style scoped>
header {
  height: 10vh;
  background-color: aquamarine;
  /* background-image: url();
  background-size: 100% 100%;
  background-color: aliceblue; */
}
main {
  height: 90vh;
  background-color: lightcoral;
  display: flex;
}
aside {
  width: 25vw;
  height: 100%;
  background-color: bisque;
}
section {
  width: 40vw;
  height: 100%;
  background-color: lawngreen;
}
article {
  width: 35vw;
  height: 100%;
  background-color: lightblue;
}
.box1 {
  width: 100%;
  height: 30vh;
}
.box2 {
  width: 100%;
  height: 30vh;
}
.box3 {
  width: 100%;
  height: 30vh;
}

#map {
  height: 60%;
  width: 100%;
  background: red;
}
</style>
